<template>
  <div class="data-card">
    <div class="line-dom" ref="line-dom"></div>
  </div>
</template>

<script>
//进度趋势图
import echarts from "echarts";
export default {
  data() {
    return {
      lineInstance: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawLineChar();
    });
  },
  methods: {
    drawLineChar() {
      let chart_dom = this.$refs["line-dom"];
      this.lineInstance = echarts.init(chart_dom);
      let baseOpt = {
        color: ["#A07DF1", "#67D5B5"],
        legend: {
          top: 14,
          right: 20,
          itemWidth: 16,
          itemHeight: 8,
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: 50,
          left: 60,
          bottom: 60,
          right: 20,
        },
        xAxis: {
          data: [
            "2023-07",
            "2023-08",
            "2023-09",
            "2023-10",
            "2023-11",
            "2023-12",
            "2024-01",
          ],
          axisLabel: {
            rotate: 20,
            color: "#666666",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisLabel: {
            color: "#666666",
            fontSize: 14,
            fontWeight: 400,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#AAAAAA",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#AAAAAA",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "计划进度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: [5, 10, 15, 20, 25, 30, 35],
          },
          {
            name: "实际进度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: [5, 10, 15, 50, 25, 30, 35],
          },
        ],
      };
      this.lineInstance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        this.lineInstance.resize();
      });
    },
  },
  destroyed() {
    this.lineInstance && this.lineInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.data-card {
  height: 100%;
  width: 100%;
  position: relative;
  .line-dom {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
